<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<link rel="stylesheet" href="/static/css/main.css">
</head>
<body>
	<section class="Container page-home">
    <div id="main-content" class="wrap-container zerogrid">
    	<h1 class="search-title">百度一下</h1>
		<div class="search-form">
		    <input id="search-scan" placeholder="请输入要搜索的内容">
		    <button id="search-btn" @click="search">搜索</button>
		    <a href="/article/save">新增</a>
		</div>
		<div class="article_list_wrap">
			<article id="news_content" v-for="item in items">
            <!-- <div class="col-1-2 right">
                <img :src="item.coverimage" class="news_image"/>
                :要与img标签之间有空格
            </div> -->
            <div class="col-1-2 left">
                <div class="clear"></div>
                <div class="art-content">
                    <h3>{{item.title}}</h3>
                    <div class="info">
                        <div class="article_list_c"><span v-html="item.content"></span></div>
                    </div>
                    <div class="line"></div>
                    <div class="article_list_b_r">
	                    <span>{{item.createTime | formatDate}}</span>
	                    <span class="more" style="margin-left:10px;">浏览量 : {{item.reading}}</span>
                    </div>
                    <a v-bind:href="['/article/details/'+item.id]" class="more">阅读全文</a>
                </div>
            </div>
        </article>
		</div>
        <!-- 循环结束  -->
    </div>


    <div id="pagination" class="clearfix">
        <ul>
            <li v-for="page in pages">
                <a class="current" href="#" v-if="currentPage == page">{{page}}</a>
               	 <!-- 高亮显示当前页 -->
                <a class="choose_page" v-if="currentPage != page" @click="clickpage">{{page}}</a>
            </li>
            <li v-if="pages > 1"><a class="choose_page" >下一页</a></li>
        </ul>
        <span> {{count}}条  共{{pages}}页</span>
    </div>


</section>
</body>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/vue.js"></script>
<script type="text/javascript" src="/static/js/date.js"></script>
<script>
    var vm = new Vue({
        el: '.page-home',
        //需要注入的模板的父元素
        data: {
            items: [],
            pages: [],
            currentPage: [],
            count: 0
        },
        created: function () {
            $.post("/article/search", {
                "wd": "",
                "pageNo": 1
            }, function (data) {
                //总页码
                vm.pages = data.totalPage;
                //循环内容
                vm.items = data.data;
                //当前页码
                vm.currentPage = data.currentPage;
                //总记录数
                vm.count = data.count;
            });
        },
        methods: {
            clickpage: function (event) {
                var currentPage = $(event.currentTarget).text();
                $.post("/article/search", {
                    "wd": $("#search-scan").val(),
                    "pageNo": parseInt(currentPage)
                }, function (data) {
                    vm.items = data.data;
                    //循环内容
                    vm.pages = data.totalPage;
                    //总页码
                    vm.currentPage = data.currentPage;
                });
            },
            search: function(){
            	$.post("/article/search", {
                    "wd": $("#search-scan").val(),
                    "pageNo": 1
                }, function (data) {
                    vm.pages = data.totalPage;
                    //总页码
                    vm.items = data.data;
                    //循环内容
                    vm.currentPage = data.currentPage;
                    vm.count = data.count;
                });
            }
        },
        filters: {
            formatDate(time) {
                var date = new Date(time);
                return formatDate(date, 'yyyy-MM-dd hh:mm');
            }
        }
    });
    
</script>
</html>